<template>
  <scroll-view scroll-y="true" show-scrollbar="false" @scrolltolower="loadMore" lower-threshold="100"
               style="background: #f1f1f1" :style="{height:height}">
    <view :class="{'item-box':isTop}">
      <slot></slot>
    </view>
    <up-loadmore
        :status="loading"
        loadingText="努力加载中,先喝杯茶"
        loadmore-text="轻轻上拉"
        nomore-text="实在没有了，别拉了~"
        color="#909399"
        height="100rpx"
    ></up-loadmore>
  </scroll-view>
</template>
<script lang="ts" setup>
import {defineEmits,ref,defineProps} from 'vue'

const props = defineProps({
  height:{
    type:String,
    default:()=>{
      return 'calc(100vh - 110rpx)'
    }
  },
  isTop:{
    type:Boolean,
    default:true
  }
})
const emits = defineEmits(['loadMore'])
const loading = ref('loadmore')


const loadMore = () => {
  loading.value = 'loading'
  emits('loadMore')
  setTimeout(() => {
    loading.value = 'nomore'
  }, 1000)
}
</script>
<style scoped lang="scss">

.item-box {
  //  #ifdef H5
  margin-top: 110rpx;
  // #endif
  // #ifdef MP-WEIXIN || APP
  margin-top: 150rpx;
  // #endif
}

.item-box:last-child {
  margin-bottom: 40rpx;
}
</style>